<template>
  <j-modal title="帮扶/帮教信息填写" :width="1000" :confirmLoading="loading" :visible="visible" switchFullscreen
    @cancel="handleCancel" @ok="handleOk">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <p class="pt">基本信息（必填）</p>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="人员姓名">
            <a-input v-model="realName" :disabled="isDisabled" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="身份证号">
            <a-input v-model="identityCard" :disabled="isDisabled" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="人员类型">
            <a-select v-model="type" :disabled="isDisabled" placeholder="请选择" style="width:100%;">
              <a-select-option v-for="(item, key) in typeArr" :key="key" :value="item.value">{{ item.title }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <p class="pt pl">计划类型（必填）</p>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="计划类型" prop="planType">
            <a-select v-model="form.planType" :disabled="true" placeholder="请选择" style="width:100%;">
              <a-select-option value="1">帮教计划</a-select-option>
              <a-select-option value="2">帮扶计划</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8" v-if="form.planType == 2">
          <a-form-model-item label="帮扶类别" prop="helpCategory">
            <a-select v-model="form.helpCategory" placeholder="请选择" style="width:100%;">
              <a-select-option value="1">就业扶持</a-select-option>
              <a-select-option value="2">教育扶持</a-select-option>
              <a-select-option value="3">医疗扶持</a-select-option>
              <a-select-option value="4">其他扶持</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8" class="item1">
          <a-form-model-item label="计划内容" prop="planContent">
            <a-textarea v-model="form.planContent" placeholder="请输入" :auto-size="{ minRows: 2, maxRows: 3 }" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <div style="position:relative;">
        <p class="pt pl beforeRequiredSign">行动计划表</p>
        <a-tooltip placement="rightBottom" style="position: absolute;left: 96px;top: 25px;z-index: 1000;"
          :overlayStyle="{ minWidth: `300px`, maxWidth: `400px` }">
          <template slot="title">
            <div>计划时间段内，如有相关数据，系统会自动判定为已完成，反之则为未完成。</div>
          </template>
          <a-icon type="question-circle" />
        </a-tooltip>
        <TargetList ref="targetList" />
      </div>
      <p class="pt pl">预计困难/风险及预案</p>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="预计困难/风险">
            <a-textarea v-model="form.risk" placeholder="请输入" :auto-size="{ minRows: 2, maxRows: 3 }" />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="预案">
            <a-textarea v-model="form.reservePlan" placeholder="请输入" :auto-size="{ minRows: 2, maxRows: 3 }" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <p class="pt pl">资源保障</p>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="投入资源">
            <a-textarea v-model="form.inputResourses" placeholder="请输入" :auto-size="{ minRows: 2, maxRows: 3 }" />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="预算">
            <a-textarea v-model="form.budget" placeholder="请输入" :auto-size="{ minRows: 2, maxRows: 3 }" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </j-modal>
</template>
<script>
import TargetList from './TargetList'
import * as helpApi from '@/api/sjsk/help/helpPlan.js'
import { getDictItemsFromCache } from '@/api/api'
export default {
  name: 'AddModal',
  components: {
    TargetList,
  },
  data() {
    return {
      visible: false,
      form: {},
      rules: {
        planType: [{ required: true, message: '请选择' }],
        helpCategory: [{ required: true, message: '请选择' }],
        planContent: [{ required: true, message: '请输入' }],
      },
      isDisabled: true,
      loading: false,
      realName: "",
      identityCard: "",
      type: "",
      typeArr: getDictItemsFromCache('personType'),
    }
  },
  async created() {
  },
  methods: {
    show() {
      this.form = {}
      this.visible = true
      //下面三个信息不提交，只显示用
      this.realName = this.$route.query.realName
      this.identityCard = this.$route.query.identityCard
      this.type = this.$route.query.type
      this.form.id = this.$route.query.id
      let personType = this.$route.query.personType // personTyp 1社戒社康  2社会面
      this.form.personType = personType
      if (personType == 1) {
        this.form.sjSkPersonId = personType
        this.form.planType = "1" //社戒社康人员，对应帮教计划
      }
      if (personType == 2) {
        this.form.socialPersonId = personType
        this.form.planType = "2" //社会面人员，对应帮扶计划
      }
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let flag = this.$refs.targetList.onValidate()
          // console.log("11111111111")
          // console.log(flag)
          if (flag) {
            this.form.actionPlans = this.$refs.targetList.getData()
            this.loading = true
            helpApi.addSchedule(this.form).then(res => {
              if (res.success) {
                this.$message.success(res.message)
                this.$emit('ok');
                this.visible = false
                this.loading = false
              } else {
                this.loading = false
                this.$message.warn(res.message)
              }
            })
              .catch(e => {
                this.loading = false
                this.$message.warn('请求失败！')
              })
          }
        }
      })
    }
  },
}
</script>
<style lang="less" scoped>
.pt {
  font-weight: bold;
}

.pl {
  padding-top: 20px;
  border-top: 1px dotted #ccc;
}

.ant-row {
  margin-left: 10px;
}

.item1 {
  width: 67%;

  /deep/.ant-col-6 {
    width: 12.3%;
  }

  /deep/.ant-col-18 {
    width: 87.3%;
  }
}

.beforeRequiredSign::before {
  display: inline-block;
  margin-right: 4px;
  color: #f5222d;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
}
</style>
